import React from 'react';
import ReactDOM from 'react-dom';
import styles from './VtxCarousel.less';

const LunBo=React.createClass({
  propsTypes:{
    interval:React.PropTypes.number,
    autoPlay:React.PropTypes.bool,
    activeIndex:React.PropTypes.bool,
    defaultActiveIndex:React.PropTypes.bool,
    direction:React.PropTypes.oneOf['right','left'],
    number:React.PropTypes.number,
    boxStyle:React.PropTypes.string,
  },
  getDefaultProps(){
    return{
      width:400,
      height:400,
      interval:3000,
      autoPlay:true,
      defaultActiveIndex:0,
      direction:'right'
    }
  },
  getInitialState(){
    return{
      activeIndex:this.props.defaultActiveIndex?this.props.defaultActiveIndex:0,
      direction:this.props.direction?this.props.direction:'right'
    }
  },
  componentDidMount(){
    this.autoPlay();
  },
  componentWillReceiveProps (){

  },
  componentWillUnmount(){
    clearInterval(this.timeOuter);
  },
  autoPlay(){
    if(this.props.autoPlay){
      if(this.props.direction==="right"){
        this.timeOuter=setInterval(this.playRight,this.props.interval);
      }else if(this.props.direction==="left"){
        this.timeOuter=setInterval(this.playLeft,this.props.interval);
      }
    }
  },
  playRight(indexIn){
      let index=indexIn?indexIn:this.state.activeIndex+1;
      if(index>this.props.number-1){
        index=0;
      }
      this.setState({
        activeIndex:index
      })
  },
  playLeft(indexIn){
      let index=indexIn?indexIn:this.state.activeIndex-1;
      if(index<0){
        index=this.props.number-1;
      }
      this.setState({
        activeIndex:index
      })
  },
  position(){
    return -parseInt(this.state.activeIndex*this.props.width)
  },
  left(){
   clearInterval(this.timeOuter);
    let oldIndex=this.props.activeIndex;
    this.playLeft(oldIndex+1);
    this.autoPlay();
  },
  right(){
    clearInterval(this.timeOuter);
    let oldIndex=this.props.activeIndex;
    this.playRight(oldIndex-1);
    this.autoPlay();
  },
  clickDot(index){
    this.setState({
      activeIndex:index
    })
  },
  mouseover(){
    clearInterval(this.timeOuter);
  },
  mouseout(){
    if(this.props.autoPlay){
      if(this.props.direction==="right"){
        this.timeOuter=setInterval(this.playRight,this.props.interval);
      }else if(this.props.direction==="left"){
        this.timeOuter=setInterval(this.playLeft,this.props.interval);
      }
    }
  },
  render(){
    let{
        interval,
        autoPlay,
        activeIndex,
        defaultActiveIndex,
        direction,
        number,
        boxStyle,
        width,
        height,
        rightIcon,
        leftIcon,
        data
      }=this.props;
      let TopValue = (height - 50) / 2;
    return(
        <div className={`${boxStyle} content`} style={{'width':width,'height':height}} onMouseOver={this.mouseover} onMouseOut={this.mouseout}>
            <span className={`${styles.leftIcon} ${styles.arrow}`} style={{top:TopValue}} onClick={this.left}>
              {leftIcon?leftIcon:`<`}
            </span>
            <span className={`${styles.rightIcon} ${styles.arrow}`} style={{top:TopValue}} onClick={this.right}>
              {rightIcon?rightIcon:`>`}
            </span>
            <ul className={styles.carouselBody} style={{width:width*number,left:this.position()}}>
              {
                this.props.children.map((item,i)=>{
                  return(
                    <li key={i} className={styles.boxStyleLi} style={{'width':width,'height':height}}>
                      {item}
                    </li> 
                  )
                })
              }
            </ul>
            <div className = {styles.dotList}>
              {
                this.props.children.map((item,i)=>{
                  return(
                    <div key={i} className={this.state.activeIndex == i?`${styles.dot} ${styles.checked}`:styles.dot} onClick={this.clickDot.bind(this,i)}></div>
                  )
                })
              }
            </div>
        </div>
      )
  }
});

export default LunBo;